var speed = document.querySelector('.speed')
console.log(speed)
var bar = document.querySelector('.speed-bar')
var video = document.querySelector('.video')


// 监听鼠标在speed容器上移动
speed.addEventListener("mousemove", (e) => {
    // offsetHeight 获取某dom结构到浏览器顶部的距离
    // console.log(speed.offsetTop)

    // offsetHeight 获取容器自身高度
    // console.log(speed.offsetHeight)

    // 获取鼠标在y轴上移动的距离
    // console.log(e.pageY)
    var y = e.pageY - speed.offsetTop
    var percent = y / speed.offsetHeight
    var height = Math.round(percent * 100) + '%'
    var min = 0.4
    var max = 4
    var playbackRate = percent * (max - min) + min
    bar.style.height = height
    bar.textContent = playbackRate.toFixed(2) + 'X'

    // 控制视屏的播放速度
    video.playbackRate = playbackRate
})